<template>
  <div class="login">
    <el-card class="login_box">
      <div class="login_title">欢迎使用</div>
      <el-input class="user_name_input login_input" type="text" v-model="state.saveInfo.username"
                placeholder="用户名"></el-input>
      <el-input class="passwd_input login_input" type="password" v-model="state.saveInfo.password"
                placeholder="密码"></el-input>
      <el-button class="login_button" type="primary" @click="loginSubmit" :loading="state.loginLoading">登陆</el-button>
    </el-card>
  </div>
</template>

<script setup>

import {reactive} from "vue";
import api from "@/utils/api.js";
import {ElMessage} from "element-plus";
import {router} from "@/router/index.js";

const state = reactive({
  saveInfo: {
    username: "",
    password: "",
  },
  loginLoading: false,
})

const loginSubmit = () => {
  state.loginLoading = true;
  const params = {
    username: state.saveInfo.username,
    password: state.saveInfo.password
  }
  api.login.login(params).then((res) => {
    state.loginLoading = false;
    // console.log(router);

    if (res?.code === 200) {
      localStorage.setItem("token", res.data.token)
      // const cookies = res.data.cookies;
      // if (cookies && typeof cookies === 'string') {
      //   const cookiesList = cookies.split(';');
      //   cookiesList.forEach((item) => {
      //     if (item) {
      //       document.cookie = item;
      //     }
      //   })
      // }

      router.replace({
        path: '/index'
      })
      // 前往下一个页面
    } else {
      ElMessage({
        message: res?.msg || "请检查网络环境",
        type: "error"
      })
    }
    console.log(res);
  }, (err) => {
    state.loginLoading = false;
    ElMessage({
      message: '请检查网络',
      type: "error"
    })
  })
}

</script>

<style lang="scss" scoped>

.login {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  .login_box {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .login_title {
      font-size: 36px;
      margin-left: 16px;
    }

    .user_name_input {
      margin-top: 32px;
    }

    .login_input {
      :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;

        .el-input__inner {
          cursor: default;
        }
      }
    }

    .passwd_input {
      margin-top: 16px;
    }

    .login_button {
      margin-top: 16px;
      width: 100%;
    }
  }
}

/* 利用穿透，设置input边框隐藏 */


#login {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  //background-image: url("../assets/images/bg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

#login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  border-radius: 15px;

  .login_title {
    font-size: 36px;
    margin-left: 16px;
  }
}
</style>
